<!-- 公示公告 -->
<template>
    <AllOut>
        <div style="position: relative;">
            <TopNav :show_links="true"></TopNav>
            <div class="navHader">
                <Nav :nav_value="3"></Nav>
            </div>
            <div class="content_out index_content" style="padding-top:140px;">
                <b-container fluid>
                    <div class="gongshi_img flex jcc aic">
                        <img src="/img/ele4.png" alt="">
                    </div>
                    <!-- Content here -->
                    <div class="dangjain_detail_nav flex aic">
                        <img src="/img/back.png" alt="" @click="back()" v-if="!detailValue">
                        <span class="fontz">当前位置</span>
                        <img src="/img/r2.png" alt="">
                        <span class="fontz" @click="back()">公示公告</span>
                        <img src="/img/r2.png" alt="" v-if="!detailValue">
                        <span class="fontz" v-if="!detailValue">{{ detailData.announcementTitle }}</span>
                    </div>
                    <b-row v-if="detailValue">
                        <b-col md="12" sm="12" class="">
                            <ul class="gongshi_main" v-loading="loading">
                                <li @click="detailClick(index)" class="flex aic jcsb" v-for="(item, index) in  pulicRows "
                                    :key="index" v-if="pulicRows.length != 0">
                                    <span class="fontz fonts16 " style="color: #3D3D3D;">{{ item.announcementTitle }}</span>
                                    <span class="fontz fonts14 " style="color: #898989;">{{ item.createTime }}</span>
                                </li>
                                <el-empty description="暂无数据" v-if="pulicRows.length == 0" />
                                <div class="flex jcc aic" style="margin: 65px 0px 12px 0px;">
                                    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                                        :current-page="ruleFrom.pageNum" :page-sizes="[10, 20, 50, 100]"
                                        :page-size="ruleFrom.pageSize" layout="total, sizes, prev, pager, next, jumper"
                                        :total="total">
                                    </el-pagination>
                                </div>
                            </ul>

                        </b-col>

                    </b-row>
                    <b-row v-if="!detailValue">
                        <b-col md="12" sm="12" class="">
                            <div class="dangjian_detail_main">
                                <div class="dangjian_detail_mains">
                                    <h2 class="dangjian_detail_mains_1 fontz">{{ detailData.announcementTitle }}</h2>
                                    <div class="dangjian_detail_mains_2 fontz">
                                        来源：{{ detailData.announcementSource }} 发布时间：{{ detailData.createTime }} 浏览量：{{
                                            detailData.viewNumber || 0 }}
                                    </div>
                                    <p class="dangjian_detail_mains_3 fontz">
                                        {{ detailData.announcementContents }}
                                    </p>
                                    <div class="flex jcc" v-for="(item, index) in detailData.files" :key="index">
                                        <b-img :src="item.url" alt="" srcset="" style="margin-bottom: 16px;" />
                                    </div>
                                </div>
                                <div class="dangjian_detail_main_footer flex jcsb aic">
                                    <span class="fontz" @click="goclick(0)">上一篇：{{ indexValue == 0 ? "无" :
                                        pulicRows[indexValue - 1].announcementTitle
                                    }}</span>
                                    <span class="fontz" @click="goclick(1)">下一篇：{{ indexValue == pulicRows.length - 1 ?
                                        "暂无数据" : pulicRows[indexValue + 1].announcementTitle
                                    }}</span>
                                </div>
                            </div>
                        </b-col>
                    </b-row>

                </b-container>
            </div>
        </div>
    </AllOut>
</template>
<script>
import { publicAnnouncement, publicAnnouncementId } from "@/api/index"

export default {
    // async asyncData() {
    //     const pulicData = await publicAnnouncement({})
    //     return { pulicData }
    // },
    data() {
        return {
            pulicData: {},
            inputValue: "",
            currentPage4: 1,
            ruleFrom: {
                pageSize: 10,
                pageNum: 1
            },
            pulicRows: [],
            total: 0,
            detailValue: true,
            loading: false,
            booleans: 0,
            indexValue: 0,
        }
    },
    created() {
        this.publicAnnouncementApi(this.ruleFrom)
        // console.log("公示公告:", this.pulicData);
        // // this.info()
    },
    methods: {
        back() {
            this.detailValue = true
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.ruleFrom.pageSize = val
            this.publicAnnouncementApi(this.ruleFrom)
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.ruleFrom.pageNum = val
            this.publicAnnouncementApi(this.ruleFrom)
        },
        detailClick(index) {
            this.indexValue = index
            console.log("id", this.pulicRows[this.indexValue]);
            this.partyNewsIdApi(this.pulicRows[this.indexValue].id)
        },
        // info() {
        //     this.pulicRows = this.pulicData.rows
        // },
        publicAnnouncementApi(params) {
            this.loading = true
            publicAnnouncement(params).then(res => {
                this.loading = false
                console.log(res);
                this.total = res.total
                this.pulicRows = res.rows
                // if(this.booleans==1){
                //     if(this.pulicRows.length!=0){
                //         this.partyNewsIdApi(this.pulicRows[this.indexValue].id)
                //     }else{

                //     }

                // }else if (this.booleans==2){

                // }
                // this.booleans=0
            }).catch(res => {

            })
        },
        partyNewsIdApi(params) {
            this.loading = true
            publicAnnouncementId(params).then(res => {
                console.log("详情:", res);
                this.loading = false
                this.detailValue = false
                this.detailData = res.data
            }).catch(res => {

            })
        },
        goclick(indexs) {
            if (indexs == 0) {
                if (this.indexValue == 0) {
                    // if(this.ruleFrom.pageNum!=1){
                    //     this.ruleFrom.pageNum--
                    //     this.booleans=1
                    //     this.partyNewsIdApi(this.pulicRows[this.indexValue].id)
                    // }

                    return
                }
                this.indexValue = this.indexValue - 1
                this.partyNewsIdApi(this.pulicRows[this.indexValue].id)
            } else {
                if (this.indexValue == this.pulicRows.length - 1) {
                    // this.ruleFrom.pageNum++
                    // this.partyNewsIdApi(this.pulicRows[this.indexValue].id)
                    return
                }
                this.indexValue = this.indexValue + 1
                this.partyNewsIdApi(this.pulicRows[this.indexValue].id)
            }
        },
    },
}
</script>

<style lang="scss" scoped>
.navHader {
    position: absolute;
    width: calc(100% + 10px);
    padding: 0 160px;
    top: 140px;
    left: -5px;
    z-index: 999;
}

.gongshi_img {
    img {
        width: 100%;
    }
}

.dangjain_detail_nav {
    margin: 16px 0px 10px 0px;
    padding: 0px 22px;
    height: 50px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #2F6CBC;

    span {
        font-size: 18px;
    }

    img {
        width: 24px;
        height: 24px;
        margin: 0px 6px;
    }
}

.gongshi_main {
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    padding: 0px 22px;
    opacity: 1;
    border: 1px solid #2F6CBC;

    li {
        padding: 20px 0px;
        border-bottom: 1px dashed #2F6CBC;
    }

    margin-bottom: 28px;
}


.dangjian_detail_main {
    margin-top: 10px;
    background: #FFFFFF;
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
    border: 1px solid #2F6CBC;
    padding: 0 35px;

    .dangjian_detail_mains {
        padding: 20px 0px 30px 0px;

        img {
            max-width: 100%;
        }

        .dangjian_detail_mains_1 {
            text-align: center;
            margin-bottom: 20px;
            font-size: 24px;
            font-weight: 700;
            color: #000000;
        }

        .dangjian_detail_mains_2 {
            text-align: center;
            font-size: 16px;
            font-family: 'Microsoft YaHei-Regular, Microsoft YaHei';
            font-weight: 400;
            color: #d5d5d5;
            margin-bottom: 30px;
        }

        .dangjian_detail_mains_3 {
            font-size: 16px;
            font-family: 'Microsoft YaHei-Regular, Microsoft YaHei';
            font-weight: 400;
            color: #3D3D3D;
            line-height: 32px;
        }
    }

    .dangjian_detail_main_footer {
        padding: 0 22px;
        height: 125px;
        border-top: 1px solid #2F6CBC;

        span {
            font-size: 18px;
            font-weight: 400;
            color: #898989;

            &:hover {
                color: #2F6CBC;
            }
        }
    }
}
</style>